<template>
  <div id="appendAddress" :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle' : '']">
    <c-title :hide="false" text="修改收货地址"></c-title>

    <div class="field-box">
      <van-cell-group :border="false">
        <van-field v-model="form.country_code" type="number"  label-width="100" required placeholder="请输入区号"  v-if="country_code">
          <span slot="label" style="margin-left: 5px;">区号</span>
        </van-field>
        <van-field v-model="form.username" label-width="100" placeholder="请输入收件人" label="收件人" clearable center >
        </van-field>
        <van-field v-model="form.mobile"  label-width="100"  placeholder="请输入联系电话" label="联系电话" clearable center >
        </van-field>
        <div v-if="!region_hide" class="region">
          <van-cell is-link center  title-style="text-align:left;color:#555">
            <van-field v-model="addressName" label="所在地区" label-width="100"  placeholder="请选择收货地址" clearable center
              :readonly="model.is_plugin == 1 ? true : false"
              @click.stop="model.is_plugin !== 1 ? addressShow = true : addressShow = false"
              style="color: transparent; text-shadow: 0 0 0 #ccc;" />
          </van-cell>
          <van-cell is-link center   title-style="text-align:left;color:#555" v-if="isShowStreet">
            <van-field v-model="form.streetName" label="街道" label-width="100" placeholder="请选择街道" clearable readonly center
              @click.stop="streetTip" style="color: transparent; text-shadow: 0 0 0 #ccc;" />
          </van-cell>
        </div>
        <div style="height: 1px;background-color: #ebedf0;margin: 0 .75rem;"></div>

        <template v-if="model.is_plugin == 1">
          <van-cell :border="false" center title-style="text-align:left;color:#555"
            v-for="(item, index) in model.plugin_data" :key="index">
            <span slot="title">{{ item.name }}：</span>
            <van-field v-model="item.value" clearable center :border="false" readonly
              style="color: transparent; text-shadow: 0 0 0 #ccc;" />
          </van-cell>
        </template>
        <template v-else>
          <van-cell is-link center title-style="text-align:left;color:#555" v-if="tag == 'makeAppointment'">
            <span slot="title">获取定位</span>
            <div slot="default" @click.stop="showLocation = true">{{
              form.latitude ? `经纬度（${form.latitude}，${form.longitude}）` : '点击获取定位' }}</div>
          </van-cell>
          <van-field v-model="form.address" label="详细地址" label-width="100"  rows="3" autosize type="textarea" maxlength="100" placeholder="请输入详细地址"
            show-word-limit />
          <yd-cityselect v-model="addressShow" :callback="addressCallback" :items="district"></yd-cityselect>
        </template>

      </van-cell-group>

    </div>

    <div style="margin: .625rem 0.75rem 0;border-radius: 0.5rem;overflow: hidden;">

      <van-cell-group :border="false" class="felx-height">
        <van-cell :border="false" title-style="text-align:left;color:#555">
          <span slot="title">设置默认地址</span>
          <span slot="default">
            <van-switch :disabled="model.is_plugin == 1 ? true : false" v-model="form.isDefault" active-color="var(--themeBaseColor)"
              inactive-color="#D6D6DC" size="18px" />
          </span>
        </van-cell>
      </van-cell-group>

    </div>



    <div style="height: 3.75rem;"></div>

    <div class="address_addnav" @click="alterAddresshandle">保存</div>
    <div class="address_addnav_del" @click="deleteHandler">删除</div>

    <van-popup v-model="streetShow" position="right" duration="0" :style="{ height: '100%', width: '100%' }">
      <van-nav-bar title="选择街道">
        <template #left>
          <span>
            <van-icon name="arrow-left" size="18" @click.native="streetShow = false" color="#333" />
          </span>
        </template>
      </van-nav-bar>
      <van-cell is-link center v-for="(item, i) in districtVal" :key="i" @click.native="streetConfirm(item.areaname)">
        <span slot="title">{{ item.areaname }}</span>
        <span slot="default"></span>
      </van-cell>

    </van-popup>
    <location ref="locationR" v-model="showLocation" :center_path="center_path" v-on:confirm="confirmLocation">
    </location>
  </div>
</template>
<script>
import alertAddress_v2_controller from './alterAddress_v2_controller';
export default alertAddress_v2_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .region .van-cell{
  padding:.3125rem .375rem !important;
}
.field-box {
  margin: .625rem .75rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
::v-deep .van-cell__title{
  color: #00001C !important;
  font-size: .875rem;
  font-weight: 500;
}
::v-deep .van-field__label {
  color: #00001C;
  font-size: .875rem;
  font-weight: 500;
}
::v-deep .yd-cityselect-nav-active,
::v-deep .yd-cityselect-item-active {
  color:var(--themeBaseColor) !important;
}
::v-deep .yd-cityselect-nav-active:after{
  background-color:var(--themeBaseColor) !important;
}
.address_addnav {
  width: 21.9375rem;
  height: 2.5rem;
  margin: 0 auto;
  color: #fff;
  font-weight: 500;
  font-size: .9375rem;
  text-align: center;
  line-height: 2.5rem;
  background: var(--themeBaseColor);
  border-radius: 1.2813rem 1.2813rem 1.2813rem 1.2813rem;
}
.address_addnav_del{
  width: 21.9375rem;
  height: 2.5rem;
  margin: 1.5625rem auto;
  color: #00001C;
  font-weight: 500;
  font-size: .9375rem;
  text-align: center;
  line-height: 2.5rem;
  border: 1px solid #AAAAB3;
  border-radius: 1.2813rem 1.2813rem 1.2813rem 1.2813rem;
}

#appendAddress ::v-deep .van-field__label {
  white-space: nowrap;
  margin-right: 0;
  width: auto;
}

#appendAddress ::v-deep .van-cell {
  padding-left: 12px;

  input::placeholder,
  textarea::placeholder {
    color: #666;
  }
}

#appendAddress .van-cell__title {
  flex: none;
}

</style>
